import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'

import './login.less';
import logo from '../../assets/images/logo.jpg'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { relogin } from '../../api'
// import memoryUtils from '../../utils/memoryUtils'
// import storageUtils from '../../utils/storageUtils'

/*
登录的路由组件
*/
const Item = Form.Item;
export default class Login extends Component {

    onFinish = async values => {
        const { username, password } = values;
        const response = await relogin(username, password)
        if (response.status===1) {
            message.error('用户名或密码错误！')
        } else {
            // const user = response.data
            //把用户名赋给主页面，获取username
            // memoryUtils.user.username = username
            localStorage.setItem('username',response.data.username);
            message.success('尊敬的' + response.data.username + '选手，欢迎你的登录！')
            
            //把用户名localStorage，维持登录，退出登录
            // storageUtils.saveUser(username)
            this.props.history.replace('/')
            // this.props.history.push({ pathname: '/' })
            localStorage.setItem('token',response.data.token);

        }
    };


    /*
    密码格式验证
    */
    // validatorPwd = (rule, value, callback) => {
    //     if (!value) {
    //         callback('请输入密码！')
    //     } else if (value.length < 4) {
    //         callback('密码长度不能小于4位！')
    //     } else if (value.length > 12) {
    //         callback('密码长度不能大于12位！')
    //     } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
    //         callback('密码必须是英文、数字下划线组成！')
    //     } else {
    //         callback(value);
    //     }             
    // }
    render() {
        //判断有有登录，如果有自动跳转到主页
        const user = localStorage.getItem('username');
        if (user) {
            return <Redirect to='/' />
        }

        return (
            <div className="login">
                <header className="login-header">
                    <img src={logo} alt="logo" />
                    <h1>Royal Never Give Up</h1>
                </header>
                <section className="login-content">
                    <h2>选手登录</h2>
                    <div>
                        <Form name="normal_login"
                            className="login-form"
                            initialValues={{ remember: true }}
                            onFinish={this.onFinish} className="login-form">
                            <Item
                                hasFeedback="success"
                                name="username"
                                rules={[{ required: true, whitespace: true, message: '请输入用户名 !' },
                                { min: 3, message: '用户名不能少与3位！' },
                                { max: 16, message: '用户名不能多与16位！' },
                                { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字下划线组成！' },
                                ]}
                            >
                                <Input prefix={
                                    <UserOutlined className="site-form-item-icon" />
                                } placeholder="Username" />
                            </Item>
                            <Item
                                hasFeedback="success"
                                name="password"
                                rules={[{ required: true, whitespace: true, message: '请输入密码 !' },
                                { min: 3, message: '密码不能少与3位！' },
                                { max: 12, message: '密码不能多与12位！' },
                                { pattern: /^[a-zA-Z0-9_]+$/, message: '密码必须是英文、数字下划线组成！' },]}
                            >
                                <Input
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="password"
                                    placeholder="Password"
                                />
                            </Item>
                            <Item>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登 录
                                </Button>
                            </Item>
                        </Form>

                    </div>
                </section>
            </div>
        )
    }
}
